import {useSelector,useDispatch} from 'umi'
import {useEffect,useState} from 'react';
import styles from './search.less';
import { Button, Form ,Input, Table,Popconfirm, message,Switch, Space} from 'antd';
import { objs } from '@/utils/searchs';
export default function search(){
    let indexModu = useSelector(state=>state.search);
    let [selectedRowKeys,setselect] = useState([]);
    let [loading,setloading] = useState(false);
    let [flag,setflag] = useState(false);
    let dispatch = useDispatch();
    useEffect(()=>{
       dispatch({
         type:'search/lister',
       })
    },[])
  //   useEffect(()=>{
  //     dispatch({
  //       type:'search/fileList'
  //     })
  //  },[])
    const onFinish = (values: any) => {
      dispatch({
        type:'search/lister',
        payload:{
          type:values.type,
          keyword:values.keyword,
          count:values.flag
        } 
      })
    };
    const columns = [
      {
        render:(row:any,id:objs)=>{
          return <span className={styles.imp}>{row}</span>
        },
        title:<span className={styles.imp}>搜索词</span>,
        dataIndex: 'keyword',
      },
      {
        title: '搜索量',
        dataIndex: 'count',
        render:(row:any)=>{
          return <span className={styles.spa}>{row}</span>
        }
      },
      {
        title: '搜索时间',
        dataIndex: 'createAt',
      },
      {
        title:'操作',
        render:(row:any)=>{
          return  <Popconfirm
          title="确认删除这个搜索记录？"
          onConfirm={()=>confirm(row)}
          onCancel={cancel}
          okText="确认"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
          
          // <span className={styles.re} onClick={()=>rem(row.id)}>删除</span> 
        
        }
      }
    ];
    const data = [];
    for (let i = 0; i < 46; i++) {
    data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
};
    function confirm(row:any) {
      console.log(row.id);
      dispatch({
        type:'search/rem',
        payload:{
          id:row.id
        }
      })
      message.warning('访客无权进行该操作');
    }
    function con(){
      message.warning('访客无权进行该操作');
    }
    function reset(){
      dispatch({
        type:'search/lister',
      })
    }
    
    function cancel(e:any) {
      console.log(e);
      message.error('Click on No');
    }
    function start(){
      setloading(true)
      // ajax request after empty completing
    };
    const hasSelected = selectedRowKeys.length > 0;
    const rowSelection = {
      onChange: (selectedRowKeys:any)=>{
        console.log(`selectedRowKeys:${selectedRowKeys}`)
        console.log();
        if(selectedRowKeys.length){
            setflag(true)
        }else{
            setflag(false)
        }
      }
    };
      return (
        <div>
        <div className={styles.box}>
        <Form  onFinish={onFinish}>
        <Form.Item
        label="类型:"
        name="type"
        rules={[{ required: true, message: '输入搜索类型' }]}
      >
        <Input  placeholder='请输入搜索类型' value="type"/>
      </Form.Item>

      <Form.Item
        label="搜索词:"
        name="keyword"
        rules={[{ required: true, message: '输入搜索词' }]}
      >
        <Input  placeholder='请输入搜索词' value="keyword"/>
      </Form.Item>

      <Form.Item
        label="搜索量:"
        name="flag"
        rules={[{ required: true, message: '输入搜索量' }]}
      >
        <Input  placeholder='请输入搜索量' value="flag"/>
      </Form.Item>
      <div className={styles.btn}>
      <Button type='primary' htmlType='submit'>搜索</Button>
      <Button htmlType="reset" onClick={()=>reset()}>重置</Button>  
        </div> 
        </Form>
        </div>
        <div className={styles.box2}>
          
        <div>
        <div style={{ marginBottom: 16 }}>
          {flag?<Button type="primary" disabled={hasSelected} onClick={start} >
          <Popconfirm
          title="确认删除这个搜索记录？"
          onConfirm={con}
          onCancel={cancel}
          okText="确认"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>
          </Button>:null}
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
          </span>
        </div>
        {indexModu.list.data &&<Table rowKey="id" rowSelection={rowSelection} dataSource={indexModu.list.data[0]} columns={columns} /> } 
      </div>


        {/* {indexModu.list.data &&<Table rowKey="id" dataSource={indexModu.list.data[0]} columns={columns} /> }  */}
        </div>
        </div>
      );
}
